<template>
<div class="login_container">
      <!-- 背景图片 -->
      <div class="loginBg">
      <img src="../assets/img/registerbg1.jpg" alt />
      </div>
    <div class="login_box">
        <!-- 头像区 -->
        <!-- <div class="avatar_box">
            <img src="../assets/logo.png" alt=""/>
        </div> -->
        <!-- 登录表单区 -->
        <div>
            <!-- ref="loginFormRef"  loginFormRef就是表单的实例对象 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form" >
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.account"
                        placeholder="账号"
                        prefix-icon="iconfont icon-wode_me">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="密码"
                        prefix-icon="iconfont icon-mima"
                        show-password>
                    </el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button type="danger">注册</el-button>
                    <el-button type="info" @click="resetLoginForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</div>

</template>
<script>
export default {
  data () {
    return {
      // 登陆表单数据对象
      loginForm: {
        account: '',
        password: ''
      },
      // 表单验证规则对象
      loginFormRules: {
        // 注意名称应该和表单数据对象的名称相同
        username: [
          // { required: true, message: '账号不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 重置表单按钮
    resetLoginForm() {
      // console.log(this);此时this指向登陆组件的实例对象
      this.$refs.loginFormRef.resetFields()// 重置表单
    },
    // 表单预验证
    login() {
      const qs = require('qs');
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        const { data: res } = await this.$http.post('/login', qs.stringify(this.loginForm))
        if(res.userInfo==null||res.token==null) 
          return this.$message.error(res.msg);
        console.log(res.userInfo)
        this.$message.success(res.msg);

        //保存token到客户端
        window.sessionStorage.setItem("userInfo",JSON.stringify(res.userInfo))
        window.sessionStorage.setItem("token",res.token);
        //页面跳转
        this.$router.push('/');
      })
    }
    // login(){
    //   // const FormData = require('form-data');
    //   // const form = new FormData();
    //   const qs = require('qs');
    //   // form.append('username',this.loginForm.username);
    //   // form.append('password',this.loginForm.password);
    //   //form, { headers: form.getHeaders() }
    //   //JSON.stringify(this.loginForm)
    //   this.$http.post('/login',qs.stringify(this.loginForm)).then(res=>{
    //     console.log(res);
    //   })
    // }
  }

}
</script>
<style lang="less" scoped>
    .login_container{
        background-color: #2b4b6b;
        height: 100%;
    }
    .loginBg {
      background-repeat: no-repeat;
      position: absolute;
      width: 100vw;
      height: 100vh;
      img {
        width: 100%;
        }
    }
    .login_box{
        width: 450px;
        height: 300px;
        background-color: #fff;
        border-radius:10px ;
        // box-shadow: -5px 6px 10px rgb(165, 163, 163);
        position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
        margin: auto;
        // left: 50%;
        // top: 50%;
        // transform: translate(-50%,-50%);移动自身的-50%
        .avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left :50%;
            transform: translate(-50%,-50%);
            background-color: #4a92da;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color:#eee
            }
        }
        .login_form{
        position:absolute;
        bottom:0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        .btns{
          display: flex;
          justify-content: center;
        }
    }
    }

</style>
